<template>
	<view class="pagenew" :style="{'min-height':h+'px','padding-top':(mt)+'px'}">
		<customNavBar1 title="填写订单" style='color: #111 !important;'></customNavBar1>
		<view class="toubu">
			<view class="taocan">
				<view class="taocan1">
					<!-- 		<u--image  width="224rpx"
						height="168rpx"></u--image> -->
					<image :src="detailsList.coverImg||detailsList.productImg" mode=""></image>
				</view>
				<view class="taocan2">
					<view class="taoxxq1">
						{{detailsList.name||detailsList.productName}}
					</view>
					<view class="taoxxq2">
						{{detailsList.refundRemark}}
					</view>
					<view class="taoxxq3">
						<view class="jiage1">
							<span>￥</span> {{detailsList.discountPrice}}
						</view>
						<!-- <view class="right">
							<img class="icon" :src="jjimg" @click="jj(index)">
							<text class="number">{{mynum}}</text>
							<img class="icon" :src="addimg" @click="add(index)">
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="line_top">
			<view class="neibu">
				<view class="neibu1">
					<view class="dianhua1">
						联系手机
					</view>
					<view class="dianhua2" style="display: flex;align-items: center">
						<!-- {{modifyPhone}} -->
						<u-input placeholder="请输入联系手机" border="none" v-model="modifyPhone" @change="changePhone"
							clearable></u-input>
					</view>
				</view>
				<view class="neibu1">
					<view class="dianhua1">
						退改政策
					</view>
					<view class="dianhua2">
						{{detailsList.refundRemark}}
					</view>
				</view>
				<view class="neibu2">
					<view class="dianhua1">
						订单金额 ￥
					</view>
					<view class="dianhua2">
						{{allmoney}}
					</view>
				</view>
			</view>
			<view class="cellBox" @click="couponList">
				<view class="cellBox-left">
					<text slot="icon" class="icon">券</text>
					<view slot="title" class="title">
						<text>优惠券</text>
					</view>
				</view>
				<view class="cellBox-right">
					<view class="cellBox-text">
						<text v-if="coupon.length==0">暂未选择优惠券</text>
						<text v-else>{{coupon.name}}</text>
					</view>
					<view class="image">
						<image src="https://i.ringzle.com/file/20240123/3cf0f794b73d4cf691371408fbd3b5e3.png"
							mode="aspectFill">
						</image>
					</view>
				</view>
			</view>
		</view>

		<view class="goumai">
			<view class="goumai1">
				<view class="zongji1">
					总计：
				</view>
				<view class="zongji2">
					¥
				</view>
				<view class="zongji3" v-if="coupon.length==0">
					{{Math.round(allmoney*100)/100}}
				</view>
				<view class="zongji3" v-else-if="coupon.length!=0&&allmoney>coupon.price">
					{{Math.round((allmoney - coupon.price)*100) / 100}}
				</view>
				<view class="zongji3" v-else-if="coupon.length!=0&&allmoney<=coupon.price">
					0.01
				</view>
				<view class="zongji4">
					<span style="text-decoration: line-through;color: #999;font-size: 20rpx">￥{{detailsList.price}}</span><del></del>
				</view>
			</view>
			<view class="goumai2" @click="goumai">
				立即购买
			</view>
		</view>
		<!-- 微信支付 -->
		<WechatPay ref="wxPay" @confirmPay="toPay" @cancelPay="cancelPay"></WechatPay>
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
	</view>
</template>

<script>
	// import customNavBar1 from '@/compoments/uNavBar2'
	import customNavBar1 from '@/compoments/uNavBar1/index2.vue'
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	import WechatPay from '@/compoments/wechatPay/index.vue'
	export default {
		components: {
			customNavBar1,
			GetPhoneNumber,
			WechatPay
		},
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				payShow: false,
				mynum: 1,
				jjimg: 'https://i.ringzle.com/file/20240221/afd0ee65707f4971833beb1b4a044a1b.png',
				addimg: 'https://i.ringzle.com/file/20240221/600c14b1ce0745039c63bdfed9cec320.png',
				fromData: {},
				orderId: '',
				detailsList: {},
				allmoney: 0,
				modifyPhone: '',
				guestName: '',
				openId: '',
				cymsType: '',
				coupon:[]
			}
		},
		onLoad(option) {
			this.detailsList = JSON.parse(option.list)
			this.allmoney = this.detailsList.discountPrice;
			this.openId = JSON.parse(uni.getStorageSync('userInfo')).openId;
			this.guestName = JSON.parse(uni.getStorageSync('userInfo')).realName;
			this.modifyPhone = JSON.parse(uni.getStorageSync('userInfo')).mobile;
			if (option.cymsType) this.cymsType = option.cymsType;
		},
		onShow(){
			let that = this
			uni.$on('updateData',function(data){
				console.log(data);
				if(data){
					that.coupon = data
				}else{
					that.coupon = []
				}
				
			})
				
		},
		methods: {
			couponList(){
				uni.navigateTo({
				    url: `/pagesMy/coupon/useList?type=4&price=${this.allmoney}`
				});
			},
			changePhone(e) {
				this.modifyPhone = e;
			},
			add(i) {
				this.allmoney = 0;
				this.mynum++;
				this.allmoney = this.detailsList.discountPrice * this.mynum;
			},
			jj(i) {
				this.allmoney = 0;
				if (this.mynum > 1) {
					this.mynum--;
					this.allmoney = this.detailsList.discountPrice * this.mynum;
				} else {
					this.allmoney = this.detailsList.discountPrice;
				}
			},
			goumai() {
				if (!this.$reg.mobile(this.modifyPhone)) return this.$showToast('请输入正确的手机号');
				//this.payShow = true;
				let postdata = {
					merchantId: this.detailsList.merchantId, //商户ID	
					merchantCategory: 4, //	商户类型
					productId: this.detailsList.id, //商品id
					orderAmount: this.allmoney,
					realityPay: this.allmoney,
					guestName: this.guestName,
					guestPhone: this.modifyPhone,
					num: this.mynum,
					openId: this.openId,
				}
				if (this.cymsType == 'order') postdata.productId = this.detailsList.productId;
				
				let newdata = JSON.parse(JSON.stringify(postdata));
				newdata.guestName = this.$aesTm.encrypt(newdata.guestName);
				newdata.guestPhone = this.$aesTm.encrypt(newdata.guestPhone);
				newdata.discountCouponUserId = this.coupon.id
				this.$api.post('/api/merchant/food/scenic/merchant/order/placeOrder', newdata)
					.then(res => {
						if (res.data.code == 0) {
							this.orderId = res.data.data.orderCode
							//this.realityPay = res.data.data.realityPay
							this.$refs.wxPay.payShow = true;
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					})
			},
			//关闭支付弹框
			closePay() {
				this.$refs.wxPay.payShow = false;
			},
			toPay() {
				this.$login().then(res => {
					if (res === 0) {
						this.confrimPay();
					} else this.$refs['phoneNumber'].show = true;
				})
			},
			cancelPay(){
				uni.redirectTo({
					url: '/pagesTrip/fineFood/fineFood/orderdetails?orderId=' + this.orderId
				})
			},
			confrimPay() {
				var list = JSON.stringify({
					price: this.allmoney,
					orderId: this.orderId
				})


				// uni.redirectTo({
				// 					url: '/pagesTrip/fineFood/fineFood/paymentcompletion?list=' + list
				//  		})

				this.$api.post('/order/icbc/createOrder', {
					orderCode: this.orderId,
					tradeType: 'JSAPI',
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId
				}, false).then(res => {
					if (res.statusCode == 200 && res.data != null) {
						this.$refs.wxPay.payShow = false;
						this.$wxPay(res.data).then(result => {
							uni.redirectTo({
								url: '/pagesTrip/fineFood/fineFood/paymentcompletion?list=' + list
							})

						})
					}

				})
			},


		}
	}
</script>

<style scoped lang="less">
	.cellBox {
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 16rpx;
		// padding: 12rpx;
		margin: 24rpx 0 ;
		padding: 35rpx 30rpx;
		display: flex;
		justify-content: space-between;
	
		.cellBox-left {
			display: flex;
			align-items: center;
	
			.icon {
				border-radius: 6rpx;
				background-color: #ff4141;
				width: 30rpx;
				height: 30rpx;
				color: #fff;
				font-size: 20rpx;
				text-align: center;
				line-height: 30rpx;
				margin-right: 10rpx;
			}
	
			.title {
				color: #666666;
				font-size: 30rpx;
				font-weight: Regular;
				// margin-left: 260rpx;
			}
		}
	
		.cellBox-right {
			display: flex;
			width: 70%;
			justify-content: space-between;
			align-items: center;
	
			.cellBox-text {
				color: #aaaaaa;
				font-size: 28rpx;
				// margin-left: 260rpx;
			}
	
			.image {
				width: 24rpx;
				height: 24rpx;
	
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.details {
		padding: 40rpx 30rpx 200rpx;

		.title {
			position: relative;
			text-align: center;

			text {
				font-size: 36rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			image {
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				right: 10rpx;
				top: 50%;
				margin-top: -18rpx;
			}
		}

		.address {
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #333333;
			margin-top: 48rpx;
		}

		.tickets {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 42rpx;

			&>text {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #777777;
			}

			&>view {
				font-size: 28rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;

				span {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
				}
			}
		}

		.total {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 61rpx;

			text {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			view {
				height: 36rpx;
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}
		}

	}

	.details_pay {
		background: #F6F6F6;

		.wechat_pay {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 83rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			padding: 41rpx 24rpx;

			.wp_left {
				display: flex;
				align-items: center;

				image {
					width: 54rpx;
					height: 54rpx;
				}

				text {
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-left: 24rpx;
				}
			}

			&>image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.pay_submit {
			margin-top: 59rpx;
			height: 92rpx;
			background: #007A69;
			border-radius: 46rpx;
			line-height: 92rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			letter-spacing: 2rpx;
		}
	}

	.goumai {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		background: #fff;
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		height: 140rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.goumai2 {
			width: 220rpx;
			height: 88rpx;
			background: #007A69;
			border-radius: 44px;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			font-style: normal;
		}

		.goumai1 {
			flex-grow: 1;
			height: 140rpx;
			display: flex;
			align-items: center;

			.zongji1 {
				height: 140rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 140rpx;
				text-align: left;
				font-style: normal;
			}

			.zongji2 {
				height: 140rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FF4141;
				line-height: 140rpx;
				text-align: left;
				font-style: normal;
			}

			.zongji3 {
				height: 140rpx;
				font-family: DINAlternate, DINAlternate;
				font-weight: bold;
				font-size: 48rpx;
				color: #FF4141;
				line-height: 140rpx;
				text-align: left;
				font-style: normal;
				padding: 0 8rpx;
			}

			.zongji4 {}
		}
	}

	.dianhua2 {
		flex-grow: 1;
		height: 102rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #111111;
		line-height: 102rpx;
		text-align: left;
		font-style: normal;
	}

	.dianhua1 {
		width: 160rpx;
		height: 102rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		line-height: 102rpx;
		text-align: left;
		font-style: normal;
	}

	.neibu2 {
		height: 102rpx;
		width: 100%;
		display: flex;
	}

	.neibu1 {
		height: 102rpx;
		width: 100%;
		display: flex;
		box-shadow: inset 0px -1px 0px 0px #EFEFEF;
	}

	.toubu {
		width: 750rpx;
		height: 420rpx;
		// position: absolute;
		position: fixed;
		z-index: 9;
		top: 0;
		left: 0;
		right: 0;
		overflow-y: auto;
		background-image: url("https://i.ringzle.com/file/20240314/01298a8ca7654415a9f21db68907ef2d.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;

		.taocan {
			width: 690rpx;
			height: 226rpx;
			position: fixed;
			z-index: 10;
			top: 230rpx;
			left: 30rpx;
			border-radius: 20rpx;
			background: #fff;
			display: flex;
			align-items: center;

			.taocan1 {
				width: 224rpx;
				height: 168rpx;
				margin-left: 20rpx;
				border-radius: 16rpx;

				image {
					border-radius: 16rpx;
					width: 100%;
					height: 100%;
				}
			}

			.taocan2 {
				flex-grow: 1;
				height: 168rpx;
				width: calc(100% - 244rpx);

				.taoxxq1 {
					height: 52rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #111111;
					line-height: 52rpx;
					text-align: left;
					font-style: normal;
					padding-left: 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.taoxxq2 {
					height: 50rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #777777;
					line-height: 50rpx;
					text-align: left;
					font-style: normal;
					padding-left: 20rpx;
				}

				.taoxxq3 {
					height: 66rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.jiage1 {
						flex-grow: 1;
						height: 66rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 40rpx;
						color: #FF3E3E;
						line-height: 66rpx;
						text-align: left;
						font-style: normal;

						span {
							width: 24rpx;
							height: 66rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #FF3E3E;
							line-height: 66rpx;
							text-align: left;
							font-style: normal;
							padding-left: 20rpx;
						}
					}

					.right {
						width: 190rpx;
						height: 66rpx;
						display: flex;
						align-items: center;

						.icon {
							width: 44rpx;
							height: 44rpx;
							vertical-align: middle;
						}

						.number {
							font-size: 36rpx;
							vertical-align: middle;
							margin: 0 30rpx;
						}
					}
				}

			}
		}

	}

	.travelName {
		height: 750rpx;
		background: #fff;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;

	}

	.line_top {
		position: fixed;
		left: 30rpx;
		top: 480rpx;
		z-index: 10;
		width: 690rpx;
		height: 306rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.neibu {
			width: 630rpx;
			height: 306rpx;
			margin: 0 auto;

		}
	}



	.pagenew {
		background: #F5F8FA;
		padding-bottom: 200rpx;


	}
</style>